<template>
  <div>
    <top-bar></top-bar>
    <left-bar :datas='data'></left-bar>
    <div class="main">
      <div class="main-mains">
        <div class="main-content">
          <div class="main-mains-top">
            编辑图文会议
          </div>
          <div class="publicTable toLongTable">
            <div class="main-returns">
              <i class="el-icon-arrow-left" @click="returns()"></i>
              <span @click="returns()">返回</span>
            </div>
            <div class="main-meeting">
              <div class="main-meetings clear">
                <div class="main-meetings-l">所属项目：</div>
                <div class="fl">
                  <el-select disabled v-model="projectType" placeholder="请选择项目">
                    <el-option v-for="item in projectOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="main-meetings clear">
                <div class="main-meetings-l">会议标题：</div>
                <div class="fl">
                  <el-input v-model.trim="title" placeholder="请输入会议标题"></el-input>
                </div>
              </div>
              <div class="main-meetings clear">
                <div class="main-meetings-l">关联问卷：</div>
                <div class="fl">
                  <el-select v-model="questId" placeholder="请选择问卷">
                    <el-option v-for="item in questList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="main-meetings bannerContent clear">
                <div class="main-meetings-l">选择缩略图：</div>
                <div class="fl rightContent">
                  <label class="chooseBanner" for="uploads">选择图片</label>
                  <input type="file" name="img" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/jpg" @change="uploadImg($event)">
                </div>
              </div>
              <div class="main-meetings clear">
                <div class="main-meetings-l">缩略图：</div>
                <div class="fl main-meetings-img">
                  <img :src=imgUrl alt="">
                </div>
              </div>
              <div class="main-meetings clear">
                <div class="main-meetings-l">请选择参会对象：</div>
                <div class="fl main-meetings-width">
                  <div class="main-meetings-user" v-for="(item,index) in doctorList" :key="index">
                    <el-checkbox v-model="roleType" @change="roleTypes" :label="item.label"></el-checkbox>
                    浏览发放积分
                    <el-input v-model="item.score1" @blur="changeScore($event,item.value,1)"></el-input>
                    浏览每人可得积分
                    <el-input v-model="item.score2" @blur="changeScore($event,item.value,2)"></el-input>
                    问卷发放积分
                    <el-input v-model="item.score3" @blur="changeScore($event,item.value,3)"></el-input>
                    问卷每人可得最高积分
                    <el-input v-model="item.score4" @blur="changeScore($event,item.value,4)"></el-input>
                  </div>
                </div>
              </div>
              <div class="main-meetings clear">
                <div class="main-meetings-l">会议时间：</div>
                <div class="fl">
                  <el-date-picker v-model="time" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                  </el-date-picker>
                </div>
              </div>
              <div class="main-meetings clear">
                <div class="main-meetings-l">所属医院：</div>
                <div class="fl">
                  <el-select v-model="hospitalType" placeholder="请选择所属医院">
                    <el-option v-for="item in hospitalOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="main-meetings clear">
                <div class="main-meetings-l">所属分类/科室：</div>
                <div class="fl">
                  <el-select v-model="departmentType" placeholder="请选择所属分类/科室">
                    <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="main-meetings clear">
                <div class="main-meetings-l">主讲医生姓名：</div>
                <div class="fl">
                  <el-select v-model="doctorType" :filter-method='getDoctor' filterable placeholder="请输入主讲医生姓名">
                    <el-option v-for="item in doctorOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="main-meetings clear">
                <div class="main-meetings-l">奖励积分</div>
                <div class="fl">
                  <el-input v-model="doctorScore" placeholder="请输入奖励积分"></el-input>
                </div>
              </div>
              <div class="main-meetings clear">
                <div class="main-meetings-l">医生简介：</div>
                <div class="fl">
                  <script id="contents" name="content" type="text/plain">
                    这里写你的初始化内容
                  </script>
                </div>
              </div>
              <div class="main-meetings clear">
                <div class="main-meetings-l">会议内容：</div>
                <div class="fl">
                  <script id="content" name="content" type="text/plain">
                    这里写你的初始化内容
                  </script>
                </div>
              </div>
              <div class="main-meetings clear">
                <div class="main-meetings-l"></div>
                <div class="fl">
                  <div class="main-btns" @click="addSubmit()">确定</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import leftBar from "@/components/leftBar";
import topBar from "@/components/topBar";
import pubilc from "@/api/pubilc";
import teletext from "@/api/teletext";
import project from "@/api/saleProject";
import questionnaire from "@/api/questionnaire";
export default {
  components: {
    leftBar,
    topBar
  },
  data() {
    return {
      formData: {
        pageIndex: 1,
        pageIndexs: 1
      },
      data: "teletextConference",
      id: this.$route.query.id,
      title: "",
      questId: "",
      questList: [],
      imgId: "",
      imgUrl: "",
      checkedDoctor: [],
      doctorList: [],
      projectType: "",
      projectOptions: [],
      time: [],
      doctorScore: "", //奖励积分
      departmentType: "",
      departmentOptions: [],
      doctorType: "",
      doctorOptions: [],
      hospitalType: "",
      hospitalOptions: [],
      hospitalPage: 1,
      roleType: [],
      roleTypeList: []
    };
  },
  methods: {
    getMettingDetails() {
      const options = {};
      teletext.getEditDetails(options, this.id).then(res => {
        if (res.code == 1) {
          this.projectType = res.data.sp_id;
          this.title = res.data.title;
          this.time[0] = res.data.begin_time;
          this.time[1] = res.data.end_time;
          this.questId = res.data.surveys_id;
          this.imgUrl = res.data.image;
          this.imgId = res.data.image_id;
          this.hospitalType = Number(res.data.speaker_hospital);
          this.departmentType = Number(res.data.speaker_department);
          this.doctorScore = res.data.speaker_score;
          this.doctorType = res.data.speaker_id;
          this.getDoctor(res.data.speaker);
          let roleTypes = res.data.role_score_setting;
          for (let i = 0; i < this.doctorList.length; i++) {
            for (let j = 0; j < roleTypes.length; j++) {
              if (this.doctorList[i].value == roleTypes[j].role) {
                this.roleType.push(this.doctorList[i].label);
                this.doctorList[i].value = roleTypes[j].role;
                this.doctorList[i].score1 = roleTypes[j].read_budget;
                this.doctorList[i].score2 = roleTypes[j].read_score;
                this.doctorList[i].score3 = roleTypes[j].surveys_budget;
                this.doctorList[i].score4 = roleTypes[j].surveys_score;
                this.roleTypeList.push({
                  role: roleTypes[j].role,
                  read_score: roleTypes[j].read_score,
                  read_budget: roleTypes[j].read_budget,
                  surveys_score: roleTypes[j].surveys_score,
                  surveys_budget: roleTypes[j].surveys_budget
                });
              }
            }
          }
          let instructionsue = UE.getEditor("content");
          instructionsue.ready(function() {
            instructionsue.setContent(res.data.content);
          });
          let instructionsues = UE.getEditor("contents");
          instructionsue.ready(function() {
            instructionsues.setContent(res.data.speaker_desc);
          });
        }
      });
    },
    getHospitalList() {
      const options = {
        page: this.hospitalPage
      };
      pubilc.getHospitalList(options).then(res => {
        if (res.code == 1) {
          for (let i = 0; i < res.data.list.length; i++) {
            this.hospitalOptions.push({
              value: res.data.list[i].id,
              label: res.data.list[i].name
            });
          }
          if (res.data.total == 15) {
            this.hospitalPage++;
            this.getHospitalList();
          }
        }
      });
    },
    getDoctor(val) {
      const options = {
        keyword: val
      };
      pubilc.userSearch(options).then(res => {
        if (res.code == 1) {
          this.doctorOptions = [];
          for (let i = 0; i < res.data.models.length; i++) {
            this.doctorOptions.push({
              value: res.data.models[i].id,
              label: res.data.models[i].real_name
            });
          }
        }
      });
    },
    changeScore(e, value, num) {
      let i;
      for (let j = 0; j < this.roleTypeList.length; j++) {
        if (value == this.roleTypeList[j].role) {
          i = j;
        }
      }
      if (num == 1) {
        this.roleTypeList[i].read_budget = event.target.value;
      } else if (num == 2) {
        this.roleTypeList[i].read_score = event.target.value;
      } else if (num == 3) {
        this.roleTypeList[i].surveys_budget = event.target.value;
      } else if (num == 4) {
        this.roleTypeList[i].surveys_score = event.target.value;
      }
    },
    roleTypes() {
      this.roleTypeList = [];
      for (let i = 0; i < this.doctorList.length; i++) {
        for (let j = 0; j < this.roleType.length; j++) {
          if (this.doctorList[i].label == this.roleType[j]) {
            this.roleTypeList.push({
              role: this.doctorList[i].value,
              read_score: this.doctorList[i].score2,
              read_budget: this.doctorList[i].score1,
              surveys_score: this.doctorList[i].score4,
              surveys_budget: this.doctorList[i].score3
            });
          }
        }
      }
    },
    addSubmit() {
      //新增医学调研
      if (this.projectType == "") {
        this.$message({
          showClose: true,
          message: "请选择所属项目",
          type: "error"
        });
        return false;
      }
      if (this.title == "") {
        this.$message({
          showClose: true,
          message: "请输入调研标题！",
          type: "error"
        });
        return false;
      }
      if (this.questId == "") {
        this.$message({
          showClose: true,
          message: "请选择关联问卷！",
          type: "error"
        });
        return false;
      }
      if (this.imgId == "") {
        this.$message({
          showClose: true,
          message: "请上传缩略图！",
          type: "error"
        });
        return false;
      }
      if (this.time == "" || this.time == null) {
        this.$message({
          showClose: true,
          message: "请选择时间！",
          type: "error"
        });
        return false;
      }
      if (!this.roleTypeList.length) {
        this.$message({
          showClose: true,
          message: "请选择调研对象！",
          type: "error"
        });
        return false;
      }
      const options = {
        id: this.id,
        sp_id: this.projectType,
        title: this.title,
        image_id: this.imgId,
        content: UE.getEditor("content").getContent(),
        speaker_id: this.doctorType,
        speaker_hospital: this.hospitalType,
        speaker_department: this.departmentType,
        speaker_desc: UE.getEditor("contents").getContent(),
        begin_time: this.time[0],
        end_time: this.time[1],
        speaker_score: this.doctorScore,
        role_score_setting: JSON.stringify(this.roleTypeList),
        surveys_id: this.questId
      };

      teletext.editTeletext(options).then(res => {
        if (res.code == 1) {
          this.$message({
            showClose: true,
            message: "编辑图文会议成功！",
            type: "success"
          });
        }
      });
    },
    uploadImg(e) {
      let demos = event.currentTarget.files[0];
      var formdata1 = new FormData();
      formdata1.append("file", demos);
      formdata1.append("type", "8");
      pubilc.uploadImg(formdata1).then(res => {
        if (res.code == 1) {
          this.imgUrl = res.data.file.full_path;
          this.imgId = res.data.file.id;
        }
      });
    },
    getProjectList() {
      const options = {
        page: this.formData.pageIndex
      };
      project.getList(options).then(res => {
        if (res.code == 1) {
          for (let i = 0; i < res.data.data.length; i++) {
            this.projectOptions.push({
              value: res.data.data[i].id,
              label: res.data.data[i].topic
            });
          }
          if (res.data.data.length == 15) {
            this.formData.pageIndex++;
            this.getProjectList();
          }
        }
      });
    },
    getDoctorList() {
      const options = {};
      this.doctorList = [];
      pubilc.getRoleList(options).then(res => {
        if (res.code == 1) {
          this.getMettingDetails();
          for (let i = 0; i < res.data.list.length; i++) {
           this.doctorList.push({
              value: res.data.list[i].id,
              label: res.data.list[i].name,
              score1: "",
              score2: "",
              score3: "",
              score4: ""
            });
          }
        }
      });
    },
    getQuestionList() {
      const options = {
        page: this.formData.pageIndexs
        // is_assoc: 2
      };
      questionnaire.getList(options).then(res => {
        if (res.code == 1) {
          for (let i = 0; i < res.data.list.length; i++) {
            this.questList.push({
              value: res.data.list[i].id,
              label: res.data.list[i].title
            });
            if (res.data.list.length == 15) {
              this.formData.pageIndexs++;
              this.getQuestionList();
            }
          }
        }
      });
    },
    getDeparList() {
      const options = {};
      pubilc.getDepartmentList(options).then(res => {
        if (res.code == 1) {
          for (let i = 0; i < res.data.list.length; i++) {
            this.departmentOptions.push({
              value: res.data.list[i].id,
              label: res.data.list[i].name
            });
          }
        }
      });
    },
    returns() {
      history.go(-1);
    },
    getUe() {
      let ue = UE.getEditor("content", {
        initialFrameWidth: 800,
        initialFrameHeight: 300,
        autoHeightEnabled: false,
        zIndex: 0
      });
      ue.ready(function() {
        ue.setContent('<p style="color:silver">请输入内容。</p>');
        ue.addListener("focus", function() {
          if (ue.getContent() == '<p style="color:silver">请输入内容。</p>') {
            ue.setContent("");
          }
        });
        ue.addListener("blur", function() {
          if (!ue.getContent()) {
            ue.setContent('<p style="color:silver">请输入内容。</p>');
          }
        });
      });
      let ues = UE.getEditor("contents", {
        initialFrameWidth: 800,
        initialFrameHeight: 300,
        autoHeightEnabled: false,
        zIndex: 0
      });
      ues.ready(function() {
        ues.setContent('<p style="color:silver">请输入内容。</p>');
        ues.addListener("focus", function() {
          if (ue.getContent() == '<p style="color:silver">请输入内容。</p>') {
            ue.setContent("");
          }
        });
        ues.addListener("blur", function() {
          if (!ue.getContent()) {
            ue.setContent('<p style="color:silver">请输入内容。</p>');
          }
        });
      });
    }
  },
  mounted() {
    this.getUe();
    this.getQuestionList();
    this.getDoctorList();
    this.getProjectList();
    this.getDeparList();
    this.getHospitalList();
  },
  destroyed() {
    UE.delEditor("content");
    UE.delEditor("contents");
  }
};
</script>

<style lang='less'>
</style>
